@if($products)
    @php
        $products = $products->merge($videoProduct)->shuffle();
    @endphp
    @foreach($products as $key=>$item)
        <li class="item" style="--font-family:{{ isset($item->font) && $item->font?$item->font->name:"" }}">

            <div class="box">
                <a href="{{ url('product/'.$item->id) }}">
                    <figure class="pic">
                        <img class="lazyload" src="{{ asset_upload(resize_img(collect($item->img)->first())) }}" data-src="{{asset_upload(collect($item->img)->first())}}" alt="{{ $item->name }}">
                        <p class="name {{ $item->name_map_position }} {{ $item->name_class }}" style="--rotate:{{ $item->name_map_rotate }}deg" data-name="{{ $item->name }}">{{ $item->name }}</p>
                        <p class="body {{ $item->three_map_position }} {{ $item->three_class }}" style="--rotate:{{ $item->three_map_rotate }}deg" data-body="{{ $item->height.$item->three_separator.$item->weight.$item->three_separator.$item->cup }}">{{ $item->height.$item->three_separator.$item->weight.$item->three_separator.$item->cup }}</p>
                        <!-- <div class="playicon">
                            <img src="/static/img/16.jpg" style="opacity: 0.7;" alt="">
                            <i class="iconfont">&#xe697;</i>
                        </div> -->
                        @if($item->show_video == 1)
                            <div class="video-box">
                                <video id="cover-video" loop="" muted="" playsinline="" autoplay poster="{{ asset_upload($item->video_cover) }}">
                                    <source src="{{ asset_upload($item->video) }}" type="video/mp4">
                                </video>
                            </div>
                        @endif
                    </figure>
                </a>
                <div class="infobox">
                    @if($item->price < 3000)
                        <div class="price-card">
                            <p class="price"><span class="nt">NT$</span>{{ $item->price }}</p>
                        </div>
                    @else
                        <div class="red-card">
                            <p class="red-price"><span class="red-nt">紅牌 NT$</span>{{ $item->price }}</p>
                        </div>
                    @endif

                    <div class="sales">
                        @if($item->labels)
                            @foreach($item->labels as $label)
                                <span class="sales-item">{{ \Illuminate\Support\Str::limit($label,14,'...') }}</span>
                            @endforeach
                        @endif
                    </div>

                </div>
                {{--<p class="name">{{ $item->name }}</p>--}}
                <div class="product-btn">

                    <a href="{{ liaison_get('line_url') }}" target="_blank" class="line-btn">
                        <span class="lineme">預約&nbsp;{{ $item->name }}</span>
                        <i class="iconfont">&#xebf5;</i>
                    </a>
                </div>
            </div>


        </li>
    @endforeach

@endif
